<template>
  <div id="scrolling-list-con">
    <g-banner :title="'滚动列表'" :des="'数据量大、数据字段较多的列表页面。条件查询支持级联选择'"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title">滚动列表</h2>
      </div>
    </a-affix>
    <div class="g-box">
      <div class="g-search-simple">
        <el-input v-model="searchInput" placeholder="请输入查询内容" class="g-search-input">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <div class="g-query-mode">
          <el-button slot="reference" type="text" v-if="queryMode" @click="queryMode = false"><i class="el-icon-caret-bottom"></i>更多查询</el-button>
          <el-button slot="reference" type="text" v-else @click="queryMode = true"><i class="el-icon-caret-top"></i>精简查询</el-button>
        </div>
      </div>
      <table class="g-search-advance" border="1" v-if="!queryMode">
        <tr>
          <td width="80px">筛选条件：</td>
          <td>
            <el-tag closable v-for="(item, index) in tags" :key="item.name" @close="handleClose(item, index)" class="g-label-primary">{{item.name}}</el-tag>
          </td>
        </tr>
        <tr>
          <td>行业分类：</td>
          <td>
            <el-radio border v-model="sort" :label="item.value" v-for="(item, index) in sorts" :key="item.name" @click.native="handleToggle(index)">{{item.name}}</el-radio>
          </td>
        </tr>
        <tr>
          <td>业务分类：</td>
          <td>
            <el-radio border v-model="sort2" :label="item.value" v-for="(item, index) in sorts2" :key="item.name" @click.native.prevent="handleSelect(index)">{{item.name}}</el-radio>
          </td>
        </tr>
      </table>
    </div>
    <div class="g-box">
      <div class="g-list-item" v-for="item in 5" :key="item">
        <div class="list-item-img">
          <img src="@/assets/img/item-img.png">
        </div>
        <div class="list-item-content">
          <h3>gateway-service</h3>
          <div class="list-item-detail">
            <div class="list-text-item"><span>应用名称：</span>网关服务</div>
            <div class="list-text-item"><span>申请时间：</span>2019-10-23 15:51:30</div>
            <div class="list-text-item"><span>结束时间：</span>2019-10-23 15:51:30</div>
            <div class="list-text-item"><span>资源描述：</span>网关服务</div>
            <div class="list-text-item"><span>上次更新时间：</span>2019-10-23 15:51:30</div>
          </div>
          <div class="list-item-rate">
            <p>
              <span>评分：</span>
              <el-rate disabled :value="4"></el-rate>
            </p>
            <p>上次更新：2018-08-24 15:16:14</p>
          </div>
          <div class="list-item-operation">
            <el-button type="danger">删除</el-button>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <el-pagination class="pull-right" layout="total, sizes, prev, pager, next, jumper" style="margin-bottom: 10px"
      :pager-count="5" :total="50" :page-sizes="[5, 10, 25]" :page-size="5" background></el-pagination>
    <div class="clearfix"></div>
  </div>
</template>
<script>
import { getScrollingCon } from '@/util/common'
import { region } from '../test-data'
export default {
  data() {
    return {
      searchInput: '',
      queryMode: false,
      tags: [],
      sort: '',
      sort2: '',
      sorts: [],
      sorts2: []
    }
  },
  created() {
    this.handleRegion()
  },
  methods: {
    getScrollingCon,
    handleRegion() {
      this.sorts = [ ...region ]
      for(let i = 0;i<this.sorts.length;i++) {
        for(let j = 0;j<this.sorts[i].subs.length;j++) {
          this.$set(this.sorts[i].subs[j], 'parent', i)
        }
      }
      this.sorts2 = this.sorts[0].subs
    },
    handleToggle(index) {
      this.sorts2 = this.sorts[index].subs
    },
    handleSelect(index) {
      this.tags.push(this.sorts2[index])
      this.sorts2.splice(index, 1)
    },
    handleClose(tag, index) {
      this.tags.splice(index, 1)
      this.sorts[tag.parent].subs.push(tag)
    }
  }
}
</script>